<template>
	<view class="yhjMain">
		<u-navbar title="优惠券" title-color="#333" back-icon-color="#333"></u-navbar>
		<!-- 选项卡 -->
		<view class="">
			<u-tabs-swiper activeColor="#058cff" :is-scroll="false" bar-width="80" bar-height="6" :current="current"
				@change="tabsChange" ref="tabs" :list="list">
				</u-tabs-swiper>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="quan-main">
						<view class="quan-bg" v-for="(item, index) in couponList" :key="index">
							<view class="quan-jine">
								<text class="jine-fuhao">￥</text>
								<text class="jine">{{item.settb409CA01}}</text>
								<view class="">
									<text>
										{{item.settb409CA05}}
									</text>

								</view>
							</view>
							<view class="quan-jieshao-content">
								<view class="">
									<text class="quan-leixing-style">{{item.settb409CA05}}</text>
									<text class="quan-tit-cont">{{item.settb409CA00}}</text>
								</view>
								<view class="quan-jz-riqi">
									<text>{{item.settb409CA09}}<text
											style="padding-left:5rpx; color:#FF4500;">到期</text></text>
								</view>
								<view class="quan-text-cj">
									<view class="quan-kycj">
										<!-- <uni-collapse accordion v-model="accordionVal" @change="change">
											<uni-collapse-item title="手风琴效果">
												<view class="content">
													<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
												</view>
											</uni-collapse-item>
										</uni-collapse> -->
										<text v-if="item.settb409CA05 =='通用券'">全平台通用</text>
										<text v-else>
											<text>指定厂家：</text>
											<text class="text-con-gd">
												{{item.settb409CB01}}
											</text>

										</text>
									</view>
									<view class="" v-if="item.settb409CA05 =='指定厂家券'">
										<text class="xq-ck" @click="xingqingCj(item.settb409CB01)">详情</text>
									</view>

								</view>


							</view>
						</view>
						<u-loadmore v-if="couponList.length!=0" :status="status" :icon-type="iconType"
							:load-text="loadText" />
						<!-- 缺醒页 -->
						<view class="yhjContent" v-if="couponList.length==0">
							<!-- v-if="couponList.length==0" -->
							<view class="zanWSJ">
								<image :src="getStaticFilePath('/QXY/noData.png')" alt="">
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<view class="quan-main">
						<view class="quan-bg" v-for="(item, index) in couponList" :key="index">
							<view class="quan-jine">
								<text class="jine-fuhao">￥</text>
								<text class="jine">{{item.settb409CA01}}</text>
								<view class="">
									<text>
										{{item.settb409CA05}}
									</text>

								</view>
							</view>
							<view class="quan-jieshao-content">
								<view class="">
									<text class="quan-leixing-style">{{item.settb409CA05}}</text>
									<text class="quan-tit-cont">{{item.settb409CA00}}</text>
								</view>
								<view class="quan-jz-riqi">
									<text>{{item.settb409CA09}}<text
											style="padding-left:5rpx; color:#FF4500;">已到期</text></text>
								</view>
								<view class="quan-text-cj">
									<view class="quan-kycj">
										<!-- <uni-collapse accordion v-model="accordionVal" @change="change">
											<uni-collapse-item title="手风琴效果">
												<view class="content">
													<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
												</view>
											</uni-collapse-item>
										</uni-collapse> -->
										<text v-if="item.settb409CA05 =='通用券'">全平台通用</text>
										<text v-else>
											<text>指定厂家：</text>
											<text class="text-con-gd">
												{{item.settb409CB01}}
											</text>

										</text>
									</view>
									<view class="" v-if="item.settb409CA05 =='指定厂家券'">
										<text class="xq-ck" @click="xingqingCj(item.settb409CB01)">详情</text>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore v-if="couponList.length!=0" :status="status" :icon-type="iconType"
							:load-text="loadText" />
						<!-- 缺醒页 -->
						<view class="yhjContent" v-if="couponList.length==0">
							<!-- v-if="couponList.length==0" -->
							<view class="zanWSJ">
								<image :src="getStaticFilePath('/QXY/noData.png')" alt="">
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

		</swiper>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
					class="text">{{cjContent}}</text></view>
					
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: JSON.parse(uni.getStorageSync('userinfo')),
				discountList: [],
				discountYHList: [],
				discountListHF: [],
				rowspan: '3',
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				list: [{
						name: '可用券'
					},
					{
						name: '不可用券'
					}
				],
				kySum:0,
				bkySum:0,
				countSum:'',
				type: 'center',
				cjContent: '',
				couponList: [],
				countpage: 1,
				page: 1,
				pageColl: 1,
				countpageColl: 1,
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

				status: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
			}
		},
		onShow() {
			this.couponList = []
			this.page = 1
			this.countpage = 1
			this.pageColl = 1
			this.countpageColl = 1
			this.queryList()
			this.queryYhjSum()
			// this.list[0].name = this.list[0].name+ `${this.kySum}`;
			// this.list[1].name = this.list[1].name+ `${this.bkySum}`;
			// if (this.ErpUserType == 'HF') {
			// 	this.getDiscountDataHF()
			// } else if (this.ErpUserType == 'FP') {
			// 	this.getDiscountDataFP()
			// }
		},
		// onPullDownRefresh() {
		// 	this.page = 1
		// 	this.countpage = 1
		// 	this.queryList()
		// },
		methods: {
			change(e) {
				console.log(e);
			},
			xingqingCj(e) {
				console.log(e)
				this.cjContent = e
				this.$refs.popup.open(this.cjContent)
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.current = index
				// this.couponList = []
				this.page = 1
				this.countpage = 1
				this.pageColl = 1
				this.countpageColl = 1
				if (index == 0) {
					this.queryList()
				} else {
					this.queryList()
					
				}

			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
				this.page = 1
				this.countpage = 1
				this.pageColl = 1
				this.countpageColl = 1
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				if (this.current == current) {
					return
				}

				this.current = current;
				this.swiperCurrent = current;
				if (current == '0') {
					this.queryList()
				} else if (current == '1') {
					this.queryList()
				}
			},
			reachBottom() {
				if (this.page == this.countpage) {
					return this.status = "nomore"
				}
				this.page++
				this.queryList()
			},
			
			queryYhjSum() {
				uni.request({
					url: this.baseUrl + '/set/settb409/getCouponCount',
					method: 'POST',
					dataType: 'json',
					data: {
						ORMTB410ID: this.userinfo.ORMTB410ID, //二级客户ID
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.list = res.data.data
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 5000,
								icon: 'none',
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				});
			},
			

			queryList() {
				uni.showLoading({
					title: '请求中...',
					mask: true
				});
				uni.request({
					url: this.baseUrl + '/set/settb409/selectPageList',
					method: 'POST',
					dataType: 'json',
					data: {
						// ORMTB400ID: this.userinfo.ORMTB400ID, //一级客户ID
						pageSize: 10,
						pageNum: this.page,
						SETTB409CB04: this.current,
						SETTB410ID: this.userinfo.ORMTB410ID, //二级客户ID
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.countSum = res.data.count
							if (!res.data.data || res.data.data == null) {
								this.couponList = []
								this.page = 1
								this.countpage = 1
								return
							}
							var data = res.data.data || []
							if (this.page > 1) {
								this.couponList = [...this.couponList, ...data]
							} else {
								this.couponList = data
							}
							this.countpage = Math.ceil(res.data.count / 10)
						} else {
							this.couponList = [];
							this.page = 1
							this.countpage = 1
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon: false
							})
						}
						if (this.countpage == this.page) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
						uni.hideLoading();
					},
					fail: (res) => {
						if (this.countpage == this.page) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.yhjMain {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #e3e3e3;
	}

	.yhjContent {
		width: 100%;
		height: 100%;
		background-color: #e3e3e3;
	}

	.zanWSJ {
		padding-top: 200rpx;
	}

	.swiper-box {
		flex: 1;
		// margin-bottom: 39px;
	}

	.swiper-item {
		height: 500rpx;
	}

	.zanWSJ>image {
		display: block;
		margin: 0 auto;
		height: 360rpx;
		width: 43%;
	}

	.quan-main {
		width: 100%;
		margin-top: 30rpx;
		padding: 0 20rpx;
		height: 100%;
		margin-bottom: 30rpx;
	}

	.quan-bg {
		background-image: url(../../static/images/quan-bg.png);
		background-repeat: no-repeat;
		width: 100%;
		height: 240rpx;
		background-size: 100%;
		// display: flex;
		margin: 10rpx 0;
		position: relative;

	}

	.quan-bg .quan-jine {
		color: #ffffff;
		position: absolute;
		width: 212rpx;
		// padding: 10rpx;
		text-align: center;
		top: 23rpx;
		padding: 0 10rpx;


	}

	.quan-jine .jine-fuhao {
		font-size: 28rpx;

	}

	.quan-jine .jine {
		font-size: 92rpx;
	}

	.quan-bg .quan-jieshao-content {
		width: 70%;
		position: absolute;
		padding-top: 36rpx;
		padding-bottom: 26rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		left: 206rpx;
	}

	.quan-jieshao-content .quan-leixing-style {
		background: #FF4500;
		color: #ffffff;
		padding: 10rpx;
		border-radius: 20rpx;
		font-size: 12rpx;
		margin-right: 10rpx;
	}

	.quan-jieshao-content .quan-tit-cont {
		font-size: 30rpx;
		font-weight: bold;
	}

	.quan-jz-riqi {
		padding-top: 24rpx;
		color: #999999;

	}

	.quan-text-cj {
		display: flex;
		padding-top: 30rpx;
		font-size: 12rpx;
		justify-content: space-between;
	}

	.quan-kycj {
		width: 400rpx;
		color: #999999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.text-con-gd {
		// display: inline-block;
		// width: 100px;

	}

	.xq-content-text {
		background: #ffffff;
		color: #999999;
		position: absolute;
		padding: 20rpx;
		top: 20rpx
	}


	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		padding: 15px;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	}

	.xq-ck {
		color: #FF4500;
		padding-left: 20rpx;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		min-height: 50px;
		width: 80%;
		margin: 0 auto;
		background-color: #fff;
	}
</style>
